<template>
</template>

<script>
</script>

<style>
</style>
<template>
	<view>
		<view class="cu-bar foot input">
			<view class="action">
				<text class="cuIcon-sound text-gray"></text>
			</view>
			
			<input ref="input" class="solid-bottom" :value="value"
				  :placeholder="placeholder" 
				  @input="$emit('input', $event.target.value)" :disabled="disabled" type="text">
				  
				  <!-- @input="$emit('input', $event.target.value)" -->
				  <!-- $event为当前事件的对象 -->
				  <!-- $event.target.value指当前input的值 -->
				  
				  <!-- <input v-model="value" /> -->
				  <!-- 本质上是 -->
				  <!-- <input :value="value" @input="value = $event.target.value" /> -->
			<view class="action">
				<text class="cuIcon-emojifill text-gray"></text>
			</view>
			<button class="cu-btn bg-green shadow" v-text="buttonName" @click="buttonClickEvent()"></button>
		</view>
	</view>
</template>

<script>
	export default {
		name:"input-bar",
		props: {
			value: {
				default: ''
			},
			disabled: {
				default: false
			},
			buttonName: {
				default: '发送'
			},
			placeholder: {
				default: ''
			}
		},
		methods: {
			buttonClickEvent() {
				// 表用父组件中的方法
				this.$emit('buttonClick')
			}
		}
	}
</script>

<style>

</style>
